<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="../css/analysis.css">
	<link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="../font/font_ljh/iconfont.css">
	<script src="../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
	<script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="../css/index.css">
	<script src="../JavaScript/Highcharts-9.3.2/code/highcharts.js"></script>


	<title>Document</title>
</head>

<body>

	<div class="kong11">
    <div id="mulu">
        <div id="header_query">
          <p>数据查询</p>
          <ul class="clear">
            <li>走步</li>
            <li>体重</li>
            <li>睡眠</li>
            <li>心率</li>
            <li>血压</li>
            <li>血糖</li>
            <li>体温</li>
            <li>运动</li>
          </ul>
        </div>
    </div>
    <!-- 数据分析内容 -->
    <div class="biankuang">
        <div class=" container dakuang">
            <!-- 走步 -->
            <div id="zoubu" class="kuangkuang">
                <div class="row">
                    <div class="col-md-7">
                        <div class="zoubu_average">
                            <div class="clear">
                                <p>每人每日平均走步</p>
                                <ul class="huan">
                                    <li>本周</li>
                                    <li>本月</li>
                                    <li>本年</li>
                                </ul>
                            </div>
                            <figure class="highcharts-figure">
                                <div id="container"></div>
                                
                            </figure>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="zoubu_average" id="zoubu_rank">
                            <div class="clear">
                                <p>走步排名</p>
                                <ul>
                                    <li>昨日</li>
                                    <li>本周</li>
                                    <li>本月</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-6">
                        <div class="zoubu_average">
                            <div class="clear">
                                <p>平均走步步数分布</p>
                                <ul>
                                    <li>本周</li>
                                    <li>本月</li>
                                    <li>本年</li>
                                </ul>
                            </div>
                            <div id="container1" style="min-width:400px;height:400px"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="zoubu_average">
                            <div class="clear">
                                <p>各年龄段走步分布</p>
                                <ul>
                                    <li>本周</li>
                                    <li>本月</li>
                                    <li>本年</li>
                                </ul>
                            </div>
                            <div id="container2" style="min-width:400px;height:400px"></div>
                        </div>
                    </div>
                  </div>
            </div>
            <!-- 体重 -->
            <div id="tizhongfenxi" class="kuangkuang">
                <div class="row">
                    <div class="col-md-8">
                        <div class="zoubu_average">
                            <div class="clear">
                                <p>各年龄段平均体重</p>
                            </div>
                            <figure class="highcharts-figure">
                                <div id="container3"></div>
                            </figure>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="zoubu_average" id="tizhong_rank">
                            <div class="clear">
                                <p>体重排名</p>
                            </div>
                        </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-8">
                        <div class="zoubu_average">
                            <div class="clear">
                                <p>体重分布</p>
                            </div>
                            <div id="container4" style="min-width:400px;height:400px"></div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="zoubu_average" id="tizhi_rank">
                            <div class="clear">
                                <p>体脂排名</p>
                            </div>
                        </div>
                    </div>
                  </div>
            </div>
            <!-- 睡眠 -->
            <div id="shuimianfenxi" class="kuangkuang">
                <div class="row">
                    <div class="col-md-12">
                        <div class="zoubu_average">
                            <div id="container5"></div>
                        </div>
                    </div>
                </div>
                <div class="row" id="shuimianhe">
                    <div class="col-md-6">
                        <div class="zoubu_average">
                            <div class="clear">
                                <p>睡眠时间分布</p>
                            </div>
                            <div id="container6" style="min-width:400px;height:400px"></div>    
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="zoubu_average">
                            <div class="clear">
                                <p>夜晚入睡情况</p>
                            </div>
                            <div id="container7" style="min-width:400px;height:400px"></div>    
                        </div>
                    </div>
                </div>
            </div>
            <!-- 心率 -->
            <div id="xinlvfenxi" class="kuangkuang">
                <div class="row">
                    <div class="col-md-12">
                        <div class="zoubu_average">
                            <div class="clear">
                                <p>各地区心率异常情况</p>
                            </div>
                            <figure class="highcharts-figure">
                                <div id="container8"></div>
                            </figure>
                        </div>
                    </div>
                </div>
                <div class="row" id="shuimianhe">
                    <div class="col-md-6">
                        <div class="zoubu_average">
                            <div class="clear">
                                <p>各年龄段高心率分布</p>
                            </div>
                            <div id="container9" style="min-width:400px;height:400px"></div>    
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="zoubu_average">
                            <div class="clear">
                                <p>各年龄段低心率分布</p>
                            </div>
                            <div id="container10" style="min-width:400px;height:400px"></div>    
                        </div>
                    </div>
                </div>
            </div>
            <!-- 血压 -->
            <div id="xueyafenxi" class="kuangkuang">
                <div class="row">
                    <div class="col-md-12">
                        <div class="zoubu_average">
                            <div class="clear">
                                <p>各地区血压异常情况</p>
                            </div>
                            <figure class="highcharts-figure">
                                <div id="container11"></div>
                            </figure>
                        </div>
                    </div>
                </div>
                <div class="row" id="shuimianhe">
                    <div class="col-md-6">
                        <div class="zoubu_average">
                            <div class="clear">
                                <p>各年龄段高血压分布</p>
                            </div>
                            <div id="container12" style="min-width:400px;height:400px"></div>    
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="zoubu_average">
                            <div class="clear">
                                <p>各年龄段低血压分布</p>
                            </div>
                            <div id="container13" style="min-width:400px;height:400px"></div>    
                        </div>
                    </div>
                </div>
            </div>
            <!-- 血糖 -->
            <div id="xuetangfenxi" class="kuangkuang">
                <div class="row">
                    <div class="col-md-12">
                        <div class="zoubu_average">
                            <div class="clear">
                                <p>各地区血糖异常情况</p>
                            </div>
                            <figure class="highcharts-figure">
                                <div id="container14"></div>
                            </figure>
                        </div>
                    </div>
                </div>
                <div class="row" id="shuimianhe">
                    <div class="col-md-6">
                        <div class="zoubu_average">
                            <div class="clear">
                                <p>各年龄段高血糖分布</p>
                            </div>
                            <div id="container15" style="min-width:400px;height:400px"></div>    
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="zoubu_average">
                            <div class="clear">
                                <p>各年龄段低血糖分布</p>
                            </div>
                            <div id="container16" style="min-width:400px;height:400px"></div>    
                        </div>
                    </div>
                </div>
            </div>
            <!-- 体温 -->
            <div id="tiwenfenxi" class="kuangkuang">
                <div class="row">
                    <div class="col-md-12">
                        <div class="zoubu_average">
                            <div class="clear">
                                <p>近一年发烧情况</p>
                            </div>
                            <figure class="highcharts-figure">
                                <div id="container17"></div>
                            </figure>
                        </div>
                    </div>
                </div>
                <div class="row" id="shuimianhe">
                    <div class="col-md-6">
                        <div class="zoubu_average">
                            <div class="clear">
                                <p>体温状态</p>
                                <p>体温正常36.5℃-37℃</p>
                            </div>
                            <div id="container18" style="min-width:400px;height:400px"></div>    
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="zoubu_average">
                            <div class="clear">
                                <p>退烧时间（单位：小时）</p>
                            </div>
                            <div id="container19" style="min-width:400px;height:400px"></div>    
                        </div>
                    </div>
                </div>
            </div>
            <!-- 运动 -->
            <div id="yundongfenxi" class="kuangkuang">
                <div class="row">
                    <div class="col-md-8">
                        <div class="zoubu_average">
                            <div class="clear">
                                <p>每月跑步情况（单位：公里）</p>
                            </div>
                            <div id="container20"></div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="zoubu_average" id="paobu_rank">
                            <div class="clear">
                                <p>跑步排名</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" id="shuimianhe">
                    <div class="col-md-12">
                        <div class="zoubu_average">
                            <div class="clear">
                                <p>每月运动情况（单位：个）</p>
                            </div>
                            <figure class="highcharts-figure">
                                <div id="container21"></div>
                            </figure>   
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
	</div>


	<!-- 内容 -->

	<div class="col-md-10 col-md-offset-2">
		<span class="foot1">大健康综合管理后台</span>
		<span class="foot2">版权所有:@大健康综合(集团)有限公司Meinian Onehealth Healthcare (Group)Co.</span>
		<span class="foot2">沪ICP备09017846号-3沪公网安备31010602006448号</span>
	</div>

	<script src="../JavaScript/index.js"></script>
	<script src="../JavaScript/data.js"></script>
	<script src="../JavaScript/utils.js"></script>
	<script>
		// 平均走步
		Highcharts.chart('container', {
			title: {
				text: '走步折线图'
			},
			// subtitle: {
			// 	text: 'Source: thesolarfoundation.com'
			// },
			yAxis: {
				title: {
					text: '步数'
				}
			},
			xAxis: {
				accessibility: {
					rangeDescription: 'Range: 1-1 to 1-7'
				}
			},
			legend: {
				layout: 'vertical',
				align: 'right',
				verticalAlign: 'middle'
			},
			plotOptions: {
				series: {
					label: {
						connectorAllowed: false
					},
					pointStart: 1 - 1
				}
			},
			series: [{
				name: '每人每日平均走步',
				data: [3240, 3270, 3350, 3308, 3350, 3465, 3374]
			}],
			responsive: {
				rules: [{
					condition: {
						maxWidth: 500
					},
					chartOptions: {
						legend: {
							layout: 'horizontal',
							align: 'center',
							verticalAlign: 'bottom'
						}
					}
				}]
			}
		});
		//走步步数分布
		$(function () {
			$('#container1').highcharts({
				chart: {
					plotBackgroundColor: null,
					plotBorderWidth: null,
					plotShadow: false
				},
				// title: {
				// 	text: '2014 某网站上各个浏览器的访问量占比'
				// },
				tooltip: {
					headerFormat: '{series.name}<br>',
					pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
				},
				plotOptions: {
					pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						dataLabels: {
							enabled: true,
							// 通过 format 或 formatter 来格式化数据标签显示
							//format: '值: {point.y} 占比 {point.percentage} %',
							formatter: function () {
								//this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
								return '<span style="color: ' + this.point.color + '"> 值：' + this.y + '，占比' + this.percentage + '%</span>';
							}
						},
						showInLegend: true  // 显示在图例中
					}
				},
				series: [{
					type: 'pie',
					name: '平均走步步数分布',
					data: [
						['2000步以下', 12.8],
						['2000步~3000步', 26.8],
						{
							name: '3000步~3500步',
							y: 45.0,
							sliced: true,
							selected: true
						},
						['3500步~4000步', 8.5],
						['4000步以上', 6.9]
					]
				}]
			});
		});
		//走步排名
		var compare = function (prop) {
			return function (obj1, obj2) {
				var val1 = obj1[prop];
				var val2 = obj2[prop];
				if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
					val1 = Number(val1);
					val2 = Number(val2);
				}
				if (val1 > val2) {
					return -1;
				} else if (val1 < val2) {
					return 1;
				} else {
					return 0;
				}
			}
		}
		let steppaixu = queryData.sort(compare('stepNum'))
		$('#zoubu_rank div').append(` <p class='col-md-12 clear'><span class="iconfont icon-jiangbei"></span> <span class="iconfont icon-touxiang"></span><span class="mingzi">${steppaixu[0].userName}</span><span class="bu">${steppaixu[0].stepNum}步</span></p>`)
		$('#zoubu_rank div').append(` <p class='col-md-12 clear'><span class="iconfont icon-jiangbei1"></span> <span class="iconfont icon-touxiang"></span><span  class="mingzi">${steppaixu[1].userName}</span><span class="bu">${steppaixu[1].stepNum}步</span></p>`)
		$('#zoubu_rank div').append(` <p class='col-md-12 clear'><span class="iconfont icon-jiangbei2"></span> <span class="iconfont icon-touxiang"></span><span  class="mingzi">${steppaixu[2].userName}</span><span class="bu">${steppaixu[2].stepNum}步</span></p>`)
		for (var i = 4; i < 11; i++) {
			$('#zoubu_rank div').append(` <p class='col-md-12 clear'><span class="onexiangsu">${i}</span> <span class="iconfont icon-touxiang twoxiangsu"></span><span class="mingzi">${steppaixu[i].userName}</span><span class="bu">${steppaixu[i].stepNum}步</span></p>`)
		}
		//年龄步数分布
		$(function () {
			$('#container2').highcharts({
				chart: {
					plotBackgroundColor: null,
					plotBorderWidth: null,
					plotShadow: false
				},
				// title: {
				// 	text: '各年龄段走步分布'
				// },
				tooltip: {
					headerFormat: '{series.name}<br>',
					pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
				},
				plotOptions: {
					pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						dataLabels: {
							enabled: true,
							// 通过 format 或 formatter 来格式化数据标签显示
							//format: '值: {point.y} 占比 {point.percentage} %',
							formatter: function () {
								//this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
								return '<span style="color: ' + this.point.color + '"> 值：' + this.y + '，占比' + this.percentage + '%</span>';
							}
						},
						showInLegend: true  // 显示在图例中
					}
				},
				series: [{
					type: 'pie',
					name: '各年龄段走步分布',
					data: [
						['20岁以下', 31.0],
						['20岁~30岁', 40.8],
						{
							name: '30岁~40岁',
							y: 19.0,
							sliced: true,
							selected: true
						},
						['40岁~50岁', 8.5],
						['50岁以上', 0.7]
					]
				}]
			});
		});

		// 各年龄段体重
		Highcharts.chart('container3', {
			chart: {
				type: 'column'
			},
			// title: {
			// 	text: 'Monthly Average Rainfall'
			// },
			// subtitle: {
			// 	text: 'Source: WorldClimate.com'
			// },
			xAxis: {
				categories: [
					'20岁以下',
					'20岁~23岁',
					'24岁~28岁',
					'29岁~32岁',
					'33岁~36岁',
					'37岁~40岁',
					'41岁~44岁',
					'45岁~48岁',
					'49岁~52岁',
					'53岁~56岁',
					'57岁~50岁',
					'50岁以上'
				],
				crosshair: true
			},
			yAxis: {
				min: 0,
				// title: {
				// 	text: '体重（kg）'
				// }
			},
			tooltip: {
				headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
				pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
					'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
				footerFormat: '</table>',
				shared: true,
				useHTML: true
			},
			plotOptions: {
				column: {
					pointPadding: 0.2,
					borderWidth: 0
				}
			},
			series: [{
				name: '各年龄段平均体重',
				data: [43.9, 45.5, 47.4, 55.2, 60.0, 76.0, 66.6, 60.5, 55.4, 54.1, 48.6, 44.0]
			}]
		});
		// 体重排名
		var compareTizhong = function (prop) {
			return function (obj1, obj2) {
				var val1 = obj1[prop];
				var val2 = obj2[prop];
				if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
					val1 = Number(val1);
					val2 = Number(val2);
				}
				if (val1 > val2) {
					return -1;
				} else if (val1 < val2) {
					return 1;
				} else {
					return 0;
				}
			}
		}
		let tizhongpaixu = queryData.sort(compareTizhong('weight'))
		$('#tizhong_rank div').append(` <p class='col-md-12 clear'><span class="iconfont icon-jiangbei"></span> <span class="iconfont icon-touxiang"></span><span class="mingzi">${tizhongpaixu[0].userName}</span><span class="bu">${tizhongpaixu[0].weight}千克</span></p>`)
		$('#tizhong_rank div').append(` <p class='col-md-12 clear'><span class="iconfont icon-jiangbei1"></span> <span class="iconfont icon-touxiang"></span><span  class="mingzi">${tizhongpaixu[1].userName}</span><span class="bu">${tizhongpaixu[1].weight}千克</span></p>`)
		$('#tizhong_rank div').append(` <p class='col-md-12 clear'><span class="iconfont icon-jiangbei2"></span> <span class="iconfont icon-touxiang"></span><span  class="mingzi">${tizhongpaixu[2].userName}</span><span class="bu">${tizhongpaixu[2].weight}千克</span></p>`)
		for (var i = 4; i < 11; i++) {
			$('#tizhong_rank div').append(` <p class='col-md-12 clear'><span class="onexiangsu">${i}</span> <span class="iconfont icon-touxiang twoxiangsu"></span><span class="mingzi">${tizhongpaixu[i].userName}</span><span class="bu">${tizhongpaixu[i].weight}千克</span></p>`)
		}
		// 体重分布
		$(function () {
			$('#container4').highcharts({
				chart: {
					plotBackgroundColor: null,
					plotBorderWidth: null,
					plotShadow: false
				},
				title: {
					text: '体重分布'
				},
				tooltip: {
					headerFormat: '{series.name}<br>',
					pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
				},
				plotOptions: {
					pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						dataLabels: {
							enabled: true,
							// 通过 format 或 formatter 来格式化数据标签显示
							//format: '值: {point.y} 占比 {point.percentage} %',
							formatter: function () {
								//this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
								return '<span style="color: ' + this.point.color + '"> 值：' + this.y + '，占比' + this.percentage + '%</span>';
							}
						},
						showInLegend: true  // 显示在图例中
					}
				},
				series: [{
					type: 'pie',
					name: '体重分布',
					data: [
						['40千克~50千克', 60.0],
						['50千克~55千克', 11.8],
						{
							name: '56千克~60千克',
							y: 12.8,
							sliced: true,
							selected: true
						},
						['60千克以上', 15.4]
					]
				}]
			});
		});
		//体脂排名
		var compareTizhi = function (prop) {
			return function (obj1, obj2) {
				var val1 = obj1[prop];
				var val2 = obj2[prop];
				if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
					val1 = Number(val1);
					val2 = Number(val2);
				}
				if (val1 > val2) {
					return -1;
				} else if (val1 < val2) {
					return 1;
				} else {
					return 0;
				}
			}
		}
		let tizhipaixu = queryData.sort(compareTizhi('fatRate'))
		$('#tizhi_rank div').append(` <p class='col-md-12 clear'><span class="iconfont icon-jiangbei"></span> <span class="iconfont icon-touxiang"></span><span class="mingzi">${tizhipaixu[0].userName}</span><span class="bu">${tizhipaixu[0].fatRate}%</span></p>`)
		$('#tizhi_rank div').append(` <p class='col-md-12 clear'><span class="iconfont icon-jiangbei1"></span> <span class="iconfont icon-touxiang"></span><span  class="mingzi">${tizhipaixu[1].userName}</span><span class="bu">${tizhipaixu[1].fatRate}%</span></p>`)
		$('#tizhi_rank div').append(` <p class='col-md-12 clear'><span class="iconfont icon-jiangbei2"></span> <span class="iconfont icon-touxiang"></span><span  class="mingzi">${tizhipaixu[2].userName}</span><span class="bu">${tizhipaixu[2].fatRate}%</span></p>`)
		for (var i = 4; i < 11; i++) {
			$('#tizhi_rank div').append(` <p class='col-md-12 clear'><span class="onexiangsu">${i}</span> <span class="iconfont icon-touxiang twoxiangsu"></span><span class="mingzi">${tizhipaixu[i].userName}</span><span class="bu">${tizhipaixu[i].fatRate}%</span></p>`)
		}

		// 睡眠堆叠图
		var chart = Highcharts.chart('container5', {
			colors: ['rgb(0,153,255)', 'rgb(78,203,115)'],
			chart: {
				type: 'column'
			},
			title: {
				text: '近一年睡眠'
			},
			xAxis: {
				categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
			},
			plotOptions: {
				series: {
					stacking: 'normal'
				}
			},
			yAxis: {
				reversedStacks: true // 默认值
			},
			series: [{
				name: '深睡',
				data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
			}, {
				name: '浅睡',
				data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
			}],
			tooltip: {
				pointFormat: '{series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)<br/>'
			}
		});
		$('input').change(function () {
			var checked = $(this).prop('checked');
			chart.yAxis[0].update({
				reversedStacks: checked
			});
		})
		//睡眠分布
		$(function () {
			$('#container6').highcharts({
				chart: {
					plotBackgroundColor: null,
					plotBorderWidth: null,
					plotShadow: false
				},
				// title: {
				// 	text: '2014 某网站上各个浏览器的访问量占比'
				// },
				tooltip: {
					headerFormat: '{series.name}<br>',
					pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
				},
				plotOptions: {
					pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						dataLabels: {
							enabled: true,
							// 通过 format 或 formatter 来格式化数据标签显示
							//format: '值: {point.y} 占比 {point.percentage} %',
							formatter: function () {
								//this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
								return '<span style="color: ' + this.point.color + '"> 值：' + this.y + '，占比' + this.percentage + '%</span>';
							}
						},
						showInLegend: true  // 显示在图例中
					}
				},
				series: [{
					type: 'pie',
					name: '睡眠时间分布',
					data: [
						['4小时以下', 25.0],
						['4~6小时', 26.8],
						// {
						// 	name: 'Chrome',
						// 	y: 12.8,
						// 	sliced: true,
						// 	selected: true
						// },
						['6~8小时', 41.3],
						['8~10小时', 6.2],
						['10小时以上', 0.7]
					]
				}]
			});
		});
		//夜晚入睡
		$(function () {
			$('#container7').highcharts({
				chart: {
					plotBackgroundColor: null,
					plotBorderWidth: null,
					plotShadow: false
				},
				// title: {
				// 	text: '2014 某网站上各个浏览器的访问量占比'
				// },
				tooltip: {
					headerFormat: '{series.name}<br>',
					pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
				},
				plotOptions: {
					pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						dataLabels: {
							enabled: true,
							// 通过 format 或 formatter 来格式化数据标签显示
							//format: '值: {point.y} 占比 {point.percentage} %',
							formatter: function () {
								//this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
								return '<span style="color: ' + this.point.color + '"> 值：' + this.y + '，占比' + this.percentage + '%</span>';
							}
						},
						showInLegend: true  // 显示在图例中
					}
				},
				series: [{
					type: 'pie',
					name: '夜晚入睡情况',
					data: [
						['21点之前', 37.0],
						['21~22点', 26.8],
						{
							name: '22~24点',
							y: 19.7,
							sliced: true,
							selected: true
						},
						['24点以后', 16.5]
						// ['Opera',     6.2],
						// ['其他',   6.9]
					]
				}]
			});
		});
		//心率
		Highcharts.chart('container8', {
			colors: ['rgb(24,144,255)', 'rgb(54,202,202)'],
			chart: {
				type: 'bar'
			},
			xAxis: {
				categories: ['北京', '上海', '广州', '福建', '四川'],
				title: {
					text: null
				}
			},
			yAxis: {
				min: 0,
				title: {
					text: 'Population (millions)',
					align: 'high'
				},
				labels: {
					overflow: 'justify'
				}
			},
			tooltip: {
				valueSuffix: ' millions'
			},
			plotOptions: {
				bar: {
					dataLabels: {
						enabled: true
					}
				}
			},
			legend: {
				layout: 'vertical',
				align: 'right',
				verticalAlign: 'top',
				x: -40,
				y: 80,
				floating: true,
				borderWidth: 1,
				backgroundColor:
					Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
				shadow: true
			},
			credits: {
				enabled: false
			},
			series: [{
				name: '心率高人数',
				data: [4, 2, 1, 3, 3]
			}, {
				name: '心率低人数',
				data: [1, 0, 2, 4, 2]
			}]
		});
		$(function () {
			$('#container9').highcharts({
				chart: {
					plotBackgroundColor: null,
					plotBorderWidth: null,
					plotShadow: false
				},
				// title: {
				// 	text: '2014 某网站上各个浏览器的访问量占比'
				// },
				tooltip: {
					headerFormat: '{series.name}<br>',
					pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
				},
				plotOptions: {
					pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						dataLabels: {
							enabled: true,
							// 通过 format 或 formatter 来格式化数据标签显示
							//format: '值: {point.y} 占比 {point.percentage} %',
							formatter: function () {
								//this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
								return '<span style="color: ' + this.point.color + '"> 值：' + this.y + '，占比' + this.percentage + '%</span>';
							}
						},
						showInLegend: true  // 显示在图例中
					}
				},
				series: [{
					type: 'pie',
					name: '各年龄段高心率分布',
					data: [
						['18岁以下', 15.0],
						['18~25岁', 16.8],
						{
							name: '25~35岁',
							y: 22.8,
							sliced: true,
							selected: true
						},
						['35~50岁', 9.2],
						['50岁以上', 36.2]
						// ['其他',   0.7]
					]
				}]
			});
		});
		$(function () {
			$('#container10').highcharts({
				chart: {
					plotBackgroundColor: null,
					plotBorderWidth: null,
					plotShadow: false
				},
				// title: {
				// 	text: '2014 某网站上各个浏览器的访问量占比'
				// },
				tooltip: {
					headerFormat: '{series.name}<br>',
					pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
				},
				plotOptions: {
					pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						dataLabels: {
							enabled: true,
							// 通过 format 或 formatter 来格式化数据标签显示
							//format: '值: {point.y} 占比 {point.percentage} %',
							formatter: function () {
								//this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
								return '<span style="color: ' + this.point.color + '"> 值：' + this.y + '，占比' + this.percentage + '%</span>';
							}
						},
						showInLegend: true  // 显示在图例中
					}
				},
				series: [{
					type: 'pie',
					name: '各年龄段低心率分布',
					data: [
						['18岁以下', 45.7],
						['18~25岁', 26.8],
						{
							name: '25~35岁',
							y: 12.8,
							sliced: true,
							selected: true
						},
						['35~50岁', 8.5],
						['50岁以上', 6.2]
						// ['其他',   0.7]
					]
				}]
			});
		});
		//血压
		Highcharts.chart('container11', {
			colors: ['rgb(24,144,255)', 'rgb(54,202,202)'],
			chart: {
				type: 'bar'
			},
			xAxis: {
				categories: ['北京', '上海', '广州', '福建', '四川'],
				title: {
					text: null
				}
			},
			yAxis: {
				min: 0,
				title: {
					text: 'Population (millions)',
					align: 'high'
				},
				labels: {
					overflow: 'justify'
				}
			},
			tooltip: {
				valueSuffix: ' millions'
			},
			plotOptions: {
				bar: {
					dataLabels: {
						enabled: true
					}
				}
			},
			legend: {
				layout: 'vertical',
				align: 'right',
				verticalAlign: 'top',
				x: -40,
				y: 80,
				floating: true,
				borderWidth: 1,
				backgroundColor:
					Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
				shadow: true
			},
			credits: {
				enabled: false
			},
			series: [{
				name: '血压高人数',
				data: [4, 2, 1, 3, 3]
			}, {
				name: '血压低人数',
				data: [1, 0, 2, 4, 2]
			}]
		});
		$(function () {
			$('#container12').highcharts({
				chart: {
					plotBackgroundColor: null,
					plotBorderWidth: null,
					plotShadow: false
				},
				// title: {
				// 	text: '2014 某网站上各个浏览器的访问量占比'
				// },
				tooltip: {
					headerFormat: '{series.name}<br>',
					pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
				},
				plotOptions: {
					pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						dataLabels: {
							enabled: true,
							// 通过 format 或 formatter 来格式化数据标签显示
							//format: '值: {point.y} 占比 {point.percentage} %',
							formatter: function () {
								//this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
								return '<span style="color: ' + this.point.color + '"> 值：' + this.y + '，占比' + this.percentage + '%</span>';
							}
						},
						showInLegend: true  // 显示在图例中
					}
				},
				series: [{
					type: 'pie',
					name: '各年龄段高血压分布',
					data: [
						['18岁以下', 15.0],
						['18~25岁', 16.8],
						{
							name: '25~35岁',
							y: 22.8,
							sliced: true,
							selected: true
						},
						['35~50岁', 9.2],
						['50岁以上', 36.2]
						// ['其他',   0.7]
					]
				}]
			});
		});
		$(function () {
			$('#container13').highcharts({
				chart: {
					plotBackgroundColor: null,
					plotBorderWidth: null,
					plotShadow: false
				},
				// title: {
				// 	text: '2014 某网站上各个浏览器的访问量占比'
				// },
				tooltip: {
					headerFormat: '{series.name}<br>',
					pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
				},
				plotOptions: {
					pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						dataLabels: {
							enabled: true,
							// 通过 format 或 formatter 来格式化数据标签显示
							//format: '值: {point.y} 占比 {point.percentage} %',
							formatter: function () {
								//this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
								return '<span style="color: ' + this.point.color + '"> 值：' + this.y + '，占比' + this.percentage + '%</span>';
							}
						},
						showInLegend: true  // 显示在图例中
					}
				},
				series: [{
					type: 'pie',
					name: '各年龄段低血压分布',
					data: [
						['18岁以下', 45.7],
						['18~25岁', 26.8],
						{
							name: '25~35岁',
							y: 12.8,
							sliced: true,
							selected: true
						},
						['35~50岁', 8.5],
						['50岁以上', 6.2]
						// ['其他',   0.7]
					]
				}]
			});
		});
		//血糖
		Highcharts.chart('container14', {
			colors: ['rgb(240,72,100)', 'rgb(54,202,202)'],
			chart: {
				type: 'bar'
			},
			xAxis: {
				categories: ['北京', '上海', '广州', '福建', '四川'],
				title: {
					text: null
				}
			},
			yAxis: {
				min: 0,
				title: {
					text: 'Population (millions)',
					align: 'high'
				},
				labels: {
					overflow: 'justify'
				}
			},
			tooltip: {
				valueSuffix: ' millions'
			},
			plotOptions: {
				bar: {
					dataLabels: {
						enabled: true
					}
				}
			},
			legend: {
				layout: 'vertical',
				align: 'right',
				verticalAlign: 'top',
				x: -40,
				y: 80,
				floating: true,
				borderWidth: 1,
				backgroundColor:
					Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
				shadow: true
			},
			credits: {
				enabled: false
			},
			series: [{
				name: '血糖高人数',
				data: [1, 2, 4, 2, 3]
			}, {
				name: '血糖低人数',
				data: [1, 2, 4, 4, 1]
			}]
		});
		$(function () {
			$('#container15').highcharts({
				chart: {
					plotBackgroundColor: null,
					plotBorderWidth: null,
					plotShadow: false
				},
				// title: {
				// 	text: '2014 某网站上各个浏览器的访问量占比'
				// },
				tooltip: {
					headerFormat: '{series.name}<br>',
					pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
				},
				plotOptions: {
					pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						dataLabels: {
							enabled: true,
							// 通过 format 或 formatter 来格式化数据标签显示
							//format: '值: {point.y} 占比 {point.percentage} %',
							formatter: function () {
								//this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
								return '<span style="color: ' + this.point.color + '"> 值：' + this.y + '，占比' + this.percentage + '%</span>';
							}
						},
						showInLegend: true  // 显示在图例中
					}
				},
				series: [{
					type: 'pie',
					name: '各年龄段高血糖分布',
					data: [
						['18岁以下', 15.0],
						['18~25岁', 16.8],
						{
							name: '25~35岁',
							y: 22.8,
							sliced: true,
							selected: true
						},
						['35~50岁', 9.2],
						['50岁以上', 36.2]
						// ['其他',   0.7]
					]
				}]
			});
		});
		$(function () {
			$('#container16').highcharts({
				chart: {
					plotBackgroundColor: null,
					plotBorderWidth: null,
					plotShadow: false
				},
				// title: {
				// 	text: '2014 某网站上各个浏览器的访问量占比'
				// },
				tooltip: {
					headerFormat: '{series.name}<br>',
					pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
				},
				plotOptions: {
					pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						dataLabels: {
							enabled: true,
							// 通过 format 或 formatter 来格式化数据标签显示
							//format: '值: {point.y} 占比 {point.percentage} %',
							formatter: function () {
								//this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
								return '<span style="color: ' + this.point.color + '"> 值：' + this.y + '，占比' + this.percentage + '%</span>';
							}
						},
						showInLegend: true  // 显示在图例中
					}
				},
				series: [{
					type: 'pie',
					name: '各年龄段低血糖分布',
					data: [
						['18岁以下', 45.7],
						['18~25岁', 26.8],
						{
							name: '25~35岁',
							y: 12.8,
							sliced: true,
							selected: true
						},
						['35~50岁', 8.5],
						['50岁以上', 6.2]
						// ['其他',   0.7]
					]
				}]
			});
		});

		//体温
		Highcharts.chart('container17', {
			colors: ['rgb(0,153,255)'],
			chart: {
				type: 'column'
			},
			// title: {
			// 	text: 'Monthly Average Rainfall'
			// },
			// subtitle: {
			// 	text: 'Source: WorldClimate.com'
			// },
			xAxis: {
				categories: [
					'1月',
					'2月',
					'3月',
					'4月',
					'5月',
					'6月',
					'7月',
					'8月',
					'9月',
					'10月',
					'11月',
					'12月'
				],
				crosshair: true
			},
			yAxis: {
				min: 0,
				// title: {
				// 	text: '体重（kg）'
				// }
			},
			tooltip: {
				headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
				pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
					'<td style="padding:0"><b>{point.y:.1f} 人</b></td></tr>',
				footerFormat: '</table>',
				shared: true,
				useHTML: true
			},
			plotOptions: {
				column: {
					pointPadding: 0.2,
					borderWidth: 0
				}
			},
			series: [{
				name: '近一年发烧人数',
				data: [12, 10, 9, 8, 7, 5, 11, 15, 17, 11, 9, 7]
			}]
		});
		// 发烧人数
		var chart = null;
		$(function () {
			$('#container18').highcharts({
				chart: {
					plotBackgroundColor: null,
					plotBorderWidth: null,
					plotShadow: false,
					spacing: [100, 0, 40, 0]
				},
				title: {
					floating: true,
					text: '圆心显示的标题'
				},
				tooltip: {
					pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
				},
				plotOptions: {
					pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						dataLabels: {
							enabled: true,
							format: '<b>{point.name}</b>: {point.percentage:.1f} %',
							style: {
								color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
							}
						},
						point: {
							events: {
								mouseOver: function (e) {  // 鼠标滑过时动态更新标题
									// 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
									chart.setTitle({
										text: e.target.name + '\t' + e.target.y + ' %'
									});
								}
								//, 
								// click: function(e) { // 同样的可以在点击事件里处理
								//     chart.setTitle({
								//         text: e.point.name+ '\t'+ e.point.y + ' %'
								//     });
								// }
							}
						},
					}
				},
				series: [{
					type: 'pie',
					innerSize: '80%',
					name: '体温人数占比',
					data: [
						{ name: '正常', y: 56.0, url: 'http://bbs.hcharts.cn' },
						['低烧', 33.4],
						// {
						//     name: 'Chrome',
						//     y: 12.8,
						//     sliced: true,
						//     selected: true,
						//     url: 'http://www.hcharts.cn'
						// },
						['高烧', 10.6]
						// ['Opera',     6.2],
						// ['其他',   0.7]
					]
				}]
			}, function (c) {
				// 环形图圆心
				var centerY = c.series[0].center[1],
					titleHeight = parseInt(c.title.styles.fontSize);
				c.setTitle({
					y: centerY + titleHeight / 2
				});
				chart = c;
			});
		});
		// 退烧时间
		Highcharts.chart('container19', {
			colors: ['rgb(0,153,255)'],
			chart: {
				type: 'column'
			},
			// title: {
			// 	text: 'Monthly Average Rainfall'
			// },
			// subtitle: {
			// 	text: 'Source: WorldClimate.com'
			// },
			xAxis: {
				categories: [
					'37.1℃',
					'37.2℃',
					'37.3℃',
					'37.4℃',
					'37.4℃以上'
				],
				crosshair: true
			},
			yAxis: {
				min: 0,
				// title: {
				// 	text: '体重（kg）'
				// }
			},
			tooltip: {
				headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
				pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
					'<td style="padding:0"><b>{point.y:.1f} 人</b></td></tr>',
				footerFormat: '</table>',
				shared: true,
				useHTML: true
			},
			plotOptions: {
				column: {
					pointPadding: 0.2,
					borderWidth: 0
				}
			},
			series: [{
				name: '退烧时间',
				data: [2, 10, 9, 8, 7]
			}]
		});

		//运动
		Highcharts.chart('container20', {
			colors: ['rgb(24,144,255)'],
			chart: {
				type: 'column'
			},
			// title: {
			// 	text: 'Monthly Average Rainfall'
			// },
			// subtitle: {
			// 	text: 'Source: WorldClimate.com'
			// },
			xAxis: {
				categories: [
					'1月',
					'2月',
					'3月',
					'4月',
					'5月',
					'6月',
					'7月',
					'8月',
					'9月',
					'10月',
					'11月',
					'12月'
				],
				crosshair: true
			},
			yAxis: {
				min: 0,
				// title: {
				// 	text: '体重（kg）'
				// }
			},
			tooltip: {
				headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
				pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
					'<td style="padding:0"><b>{point.y:.1f} 公里</b></td></tr>',
				footerFormat: '</table>',
				shared: true,
				useHTML: true
			},
			plotOptions: {
				column: {
					pointPadding: 0.2,
					borderWidth: 0
				}
			},
			series: [{
				name: '每月跑步情况',
				data: [117, 122, 132, 149, 138, 112, 105, 98, 138, 135, 140, 144]
			}]
		});
		let paobupaixu = queryData.sort(compare(Number('raceDistance')))
		$('#paobu_rank div').append(` <p class='col-md-12 clear'><span class="iconfont icon-jiangbei"></span> <span class="iconfont icon-touxiang"></span><span class="mingzi">${paobupaixu[0].userName}</span><span class="bu">${paobupaixu[0].raceDistance}</span></p>`)
		$('#paobu_rank div').append(` <p class='col-md-12 clear'><span class="iconfont icon-jiangbei1"></span> <span class="iconfont icon-touxiang"></span><span  class="mingzi">${paobupaixu[1].userName}</span><span class="bu">${paobupaixu[1].raceDistance}</span></p>`)
		$('#paobu_rank div').append(` <p class='col-md-12 clear'><span class="iconfont icon-jiangbei2"></span> <span class="iconfont icon-touxiang"></span><span  class="mingzi">${paobupaixu[2].userName}</span><span class="bu">${paobupaixu[2].raceDistance}</span></p>`)
		for (var i = 4; i < 11; i++) {
			$('#paobu_rank div').append(` <p class='col-md-12 clear'><span class="onexiangsu">${i}</span> <span class="iconfont icon-touxiang twoxiangsu"></span><span class="mingzi">${paobupaixu[i].userName}</span><span class="bu">${paobupaixu[i].raceDistance}</span></p>`)
		}
		Highcharts.chart('container21', {
			colors: ['rgb(24,144,255)', 'rgb(54,203,203)', 'rgb(250,204,20)'],
			// title: {
			// 	text: 'Solar Employment Growth by Sector, 2010-2016'
			// },
			// subtitle: {
			// 	text: 'Source: thesolarfoundation.com'
			// },
			yAxis: {
				// title: {
				// 	text: 'Number of Employees'
				// }
			},
			xAxis: {
				accessibility: {
					rangeDescription: 'Range: 1 to 12'
				}
			},
			legend: {
				layout: 'vertical',
				align: 'right',
				verticalAlign: 'middle'
			},
			plotOptions: {
				series: {
					label: {
						connectorAllowed: false
					},
					pointStart: 1
				}
			},
			series: [{
				name: '深蹲',
				data: [1536, 1523, 1589, 1600, 1700, 1567, 1678, 1435, 1896, 1768, 1687, 1676]
			}, {
				name: '仰卧起坐',
				data: [1435, 1345, 1435, 1243, 1345, 1123, 1456, 1267, 1345, 1298, 1466, 1378]
			}, {
				name: '俯卧撑',
				data: [794, 834, 850, 902, 857, 848, 827, 890, 880, 876, 897, 800]
			}],
			responsive: {
				rules: [{
					condition: {
						maxWidth: 500
					},
					chartOptions: {
						legend: {
							layout: 'horizontal',
							align: 'center',
							verticalAlign: 'bottom'
						}
					}
				}]
			}
		});

		$('#header_query ul li').click(function () {
			this.style.color = 'rgb(24,174,255)'
			let x = 0
			// console.log($('#header_query ul li')[0])
			for (i = 0; i < $('#header_query ul li').length; i++) {
				if (this != $('#header_query ul li')[i]) {
					$('#header_query ul li')[i].style.color = '#555'
				}
				else {
					x = i
				}
			}
			// console.log($('.kuangkuang'))
			$('.kuangkuang').css({
				display: 'none'
			})
			$('.kuangkuang').eq(x).css({
				display: 'block'
			})

		})
	</script>

</body>

</html>